セクション区切りを可視化する 2
https://gyazo.com/e35b8c8ba2482a0e992b0343df12896a
左のオレンジの丸がセクション番号になってます。
https://gyazo.com/d1c3bae42a81822c0781b27af8410601
セクション番号がわかって嬉しい場合ってどんなんよ? と思わんでもないけど、
プレゼン用のページだったりとか、用語集だったりとか、セクション数字が増えていくと
「がんばったな~」とか「そろそろページを分けたいな」とか考えたりします。それもまたScrapbox。
code:style.css
/* セクション区切りを可視化する (番号) */
.app { counter-reset: section }
.app:not(.presentation) .line.section-title:not(.line-title) { position: relative }
.app:not(.presentation) .line.section-title:not(.line-title):after {
counter-increment: section;
content: counter(section);
display: inline-block; width: 1.6em; height: 1.6em;
position: absolute; top: 5%; left: -5vw;
background-color: #f7ca2a; border-radius: 50%; color: #fff; font: 600 normal 90%/1.6 'Century Gothic', Arial, sans-serif; text-align: center; white-space: nowrap }